<template>
  <div id="chapters">
    <v-row :gutter="16" :style="{ margin: '12px 5px' }">
      <v-col class="gutter-row" span="8">
        <!-- 导航 -->
        <v-breadcrumb>
          <v-breadcrumb-item>
            <v-icon type="home"></v-icon>
            <router-link :to="{ name: 'Index' }">首页</router-link>
          </v-breadcrumb-item>
          <v-breadcrumb-item>
            {{book.name}}
          </v-breadcrumb-item>
        </v-breadcrumb>
      </v-col>
    </v-row>
    <!-- 章节 -->
    <v-card :title="book.name" no-hovering :loading="loading" :bordered="bordered">
      <v-card-grid :style="{width: '15%', marginLeft: '4%', marginTop: '20px', textAlign: 'center'}"
        v-for="chapter of chapters" :key="chapter.id">
        <router-link :to="{ name: 'BookContent', params: { bookId: bookId, chapterId: chapter.id } }">
          <v-tooltip :content='chapter.title'>
            <span>{{ chapter.title | filter }}</span>
          </v-tooltip>
        </router-link>
      </v-card-grid>
    </v-card>
    <!-- 滚动加载 -->
    <infinite-loading @infinite="infiniteHandler" style="margin-top: 20px;">
      <div slot="spinner">拼命加载中...</div>
      <div slot="no-more">没有更多内容啦:(</div>
      <div slot="no-results">没数据啦:(</div>
    </infinite-loading>
    <!-- 回到顶部 -->
    <v-back-top></v-back-top>
  </div>
</template>

<script>
export default {
  name: "BookChapters",
  data() {
    return {
      page: 0,
      bookId: this.$route.params.bookId,
      book: {},
      chapters: [],
      loading: false,
      bordered: false
    };
  },
  mounted() {
    this.loadBook();
  },
  filters: {
    filter(value) {
      if (value.length > 12) {
        return value.substring(0, 12) + "...";
      } else {
        return value;
      }
    }
  },
  methods: {
    loadBook() {
      const url = "/book/" + this.bookId;
      return this.$get(url).then(data => {
        this.book = data;
      });
    },
    infiniteHandler($state) {
      const url = "/chapter";
      this.$get(url, {
        bookId: this.bookId,
        page: this.page,
        size: 100
      }).then(data => {
        if (data.content.length) {
          this.page += 1;
          this.chapters.push(...data.content);
          $state.loaded();
        } else {
          $state.complete();
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
#chapters .ant-card {
  width: 80%;
  left: 10%;
  background-color: white;
}
#chapters .ant-card-head {
  height: 68px;
  line-height: 48px;
  background: #fff;
  border-bottom: 20px solid #ececec;
  padding: 0 24px;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  margin-bottom: -1px;
}
#chapters .ant-card-head-title {
  font-size: 14px;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  float: none;
  text-align: center;
}
#chapters .ant-card-body {
  padding: 0px 10px 20px 10px;
}
#chapters .ant-card-grid {
  background-color: #ececec;
}
</style>
